﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>自定义过渡的类名</title>
</head>

<body>
    <!-- 引入 animate.css动画样式 -->
    <!-- 3.5.1 -->
    <!-- <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css"> -->
    <!-- 4.1.1 -->
    <link rel="stylesheet" href="./animate.min.css">

    <div id="app">
        <button @click="show=!show">点击我</button>
        <!-- enter-active-class: 控制动画的进入 -->
        <!-- leave-active-calss: 控制动画的离开 -->
        <!-- animated 类似于全局变量，它定义了动画的持续时间： -->
        <!-- bounceInUp和slideInRight是animate.css中的动画具体的动画效果名称，可以去查看文档  -->
        <!-- <transition enter-active-class="animated bounceInUp" leave-active-class="animated slideInRight">
            <p v-if="show">animate3.5.1</p>
        </transition> -->

        <transition 
            enter-active-class="animate__animated animate__bounceInUp"
            leave-active-class="animate__animated animate__slideInRight"
        >
            <p v-if="show">animate4.1.1</p>
        </transition>

    </div>

    <!--引入vue文件-->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        const vm = Vue.createApp({
            data() {
                return {
                    show: true
                }
            }
        }).mount('#app');
    </script>
</body>

</html>